<template>
  <div class='my-index'>

    <!-- 登录后展示的页面 -->
    <van-cell-group
      :style="{
        'background': 'url(' + loginData.profile.backgroundUrl + ')',
        'background-size': 'cover'
      }"
      class="login bg"
      v-if="loginData"
    >
      <van-cell
        class="baseInfo"
        center
      >
        <van-image
          class="userImg"
          slot="icon"
          round
          fit="cover"
          :src="loginData.profile.avatarUrl"
        />
        <div slot="title">
          <p class="name">{{ loginData.profile.nickname }}</p>
          <p class="sign">
            {{ loginData.profile.signature ? '签名：' + loginData.profile.signature : '这家伙很懒，连个签名都不愿写'}}
          </p>
        </div>
        <van-button
          round
          size="mini"
        >编辑资料</van-button>
      </van-cell>
    </van-cell-group>
    <!-- / 登录后展示的页面 -->

    <!-- 未登录时展示的页面 -->
    <div
      class="no-login bg"
      v-else
      @click="$router.push('/login')"
    >
      <div class="loginImgBg">
        <i class="iconfont icon-zhanghaodenglu"></i>
      </div>
      <div class="loginText">
        注册 / 登录
      </div>
    </div>
    <!-- / 未登录时展示的页面 -->

    <!-- 悬浮展示牌 -->
    <div class="grade_caontainer" v-if="loginData">
      <div class="grade_content_wrap">
        <div class="grade_title_wrap">
          <i class="iconfont icon-changpian grade_icon"></i>
          <span class="grade_title">成长等级</span>
        </div>
        <van-notice-bar
          :scrollable="true"
          delay="3"
          speed="40"
        >
          <div class="grade_label">
            当前等级lv.{{ levelData.level }}{{ gradeContent }}{{ levelData.level + 1 > 10 ? '' : ('，即可升级lv.' + (levelData.level + 1)) }}。
          </div>
        </van-notice-bar>
      </div>
      <div class="grade_border"></div>
      <div class="grade_content_wrap">
        <div class="grade_title_wrap">
          <i class="iconfont icon-biaoqian grade_icon"></i>
          <span class="grade_title">会员特权</span>
        </div>
        <div class="grade_label">
          开会员享无损音质
        </div>
      </div>
    </div>
    <!-- / 悬浮展示牌 -->

    <!-- 底部工功能区 -->
    <van-cell-group class="bottom_operate">
      <van-cell :border="false">
        <div slot="icon">
          <i class="iconfont icon-wodehaoyou"></i>
        </div>
        <div slot="default">
          我的好友
        </div>
      </van-cell>
      <van-cell :border="false">
        <div slot="icon">
          <i class="iconfont icon-tingge"></i>
        </div>
        <div slot="default">
          听歌识曲
        </div>
      </van-cell>
      <van-cell :border="false">
        <div slot="icon">
          <i class="iconfont icon-dingshi"></i>
        </div>
        <div slot="default">
          定时关闭
        </div>
      </van-cell>
      <van-cell :border="false">
        <div slot="icon">
          <i class="iconfont icon-zhuti"></i>
        </div>
        <div slot="default">
          主题
        </div>
      </van-cell>
      <van-cell :border="false">
        <div slot="icon">
          <i class="iconfont icon-shezhi"></i>
        </div>
        <div slot="default">
          设置
        </div>
      </van-cell>
      <van-cell :border="false" @click="loginOut">
        <div slot="icon">
          <i class="iconfont icon-tuichu"></i>
        </div>
        <div slot="default">
          退出
        </div>
      </van-cell>
    </van-cell-group>
    <!-- / 底部工功能区 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { loginOut } from '@/api/login'
import { getAccountInfo, getUserLevel } from '@/api/user'
import {
  Cell,
  CellGroup,
  Image as VanImage,
  Button,
  NoticeBar
} from 'vant'

export default {
  name: 'my',
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [VanImage.name]: VanImage,
    [Button.name]: Button,
    [NoticeBar.name]: NoticeBar
  },
  props: {},
  data () {
    return {
      levelData: {},
      accountInfo: {}
    }
  },
  computed: {
    ...mapState(['loginData']),
    gradeContent: function () {
      let playCount = this.levelData.nextPlayCount - this.levelData.nowPlayCount
      let loginCount = this.levelData.nextLoginCount - this.levelData.nowLoginCount
      playCount = playCount !== 0 ? ('，听歌' + playCount + '首') : ''
      loginCount = loginCount !== 0 ? ('，登录' + loginCount + '天') : ''
      return playCount + loginCount
    }
  },
  watch: {
    loginData: {
      handler: async function () {
        if (this.loginData) {
          const { data } = await getAccountInfo({
            id: this.loginData.profile.userId,
            cookie: this.loginData.cookie
          })
          this.accountInfo = data
          const levelData = await getUserLevel({
            cookie: this.loginData.cookie
          })
          this.levelData = levelData.data.data
        }
      },
      immediate: true
    }
  },
  created () {},
  mounted () {},
  methods: {
    async loginOut () {
      this.$store.commit('setLoginData', null)
      await loginOut()
    }
  }
}
</script>
<style lang='less' scoped>
.my-index {
  .bg {
    background: url('./bg.jpg');
    background-size: cover;
  }
  .login {
    height: 205px;
    .van-cell {
      background-color: unset;
    }
    .baseInfo {
      height: 164px;
      /deep/ .van-cell__value {
        flex: unset;
        margin-left: 10px;
      }
      .van-button--mini {
        padding: 0 10px;
      }
      .van-button--default {
        background: rgba(255, 255, 255, 0.8);
        border: unset;
      }
      .userImg {
        height: 71px;
        width: 71px;
        border: #FFFFFF 2px solid;
        box-sizing: border-box;
        margin-right: 10px;
      }
      .name {
        font-size: 16px;
        color: #FFFFFF;
        margin: 5px 0px;
        text-shadow: 0px 1px 2px #535353;
      }
      .sign {
        font-size: 12px;
        color: #e4e4e4;
        line-height: 18px;
        margin: 0;
        text-shadow: 0px 1px 2px #535353;
      }
    }
  }
  .no-login {
    height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .loginImgBg {
      width: 90px;
      height: 90px;
      border-radius: 80px;
      background-color: rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-zhanghaodenglu {
        font-size: 60px;
        color: #2C2C2C;
      }
    }
    .loginText {
      margin-top: 14px;
      font-size: 18px;
      color: #ffffff;
    }
  }
  .grade_caontainer {
    height: 83px;
    margin: 0px 15px 0px 15px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 10px 10px #dddddd;
    position: absolute;
    top: 164px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    .grade_content_wrap {
      height: 65px;
      width: 50%;
      text-align: center;
      .grade_title_wrap {
        line-height: 32px;
        .grade_icon {
          font-size: 24px;
          margin-right: 2px;
          color: #aaaaa9;
        }
        .grade_title {
          font-size: 19px;
        }
      }
      /deep/ .van-notice-bar {
        background-color: #ffffff;
        height: 0.5rem;
      }
     /deep/ .grade_label {
      font-size: 14px;
      color: #b9b9b9;
     }
    }
    .grade_border:not(:last-child) {
      height: 40px;
      border-right: #e5e5e5 2px solid;
    }
  }
  .bottom_operate {
    margin-top: 80px;
    .iconfont {
      font-size: 25px;
      margin-right: 5px;
    }
    /deep/ .van-cell {
      font-size: 20px;
      line-height: 40px;
    }
  }
}
</style>
